<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
div{
    display: inline-block;
    border:1px solid #6baabb;
    width:40px;
    height:40px;
    float:left;
    margin:0px 10px;
}
a{
    display: inline-block;
    width:40px;
    height:40px;
    background: #6baabb;
}
.Round{/*圆*/
    border-radius:20px;
}
.LeftRound{/*左半圆*/
    width:20px;
    border-radius:20px 0px 0px 20px;
}
.RightRound{/*右半圆*/
    width:20px;
    border-radius:0px 20px 20px 0px;
}
.TopRound{/*上半圆*/
    height:20px;
    border-radius:20px 20px 0px 0px;
}
.BottomRound{/*下半圆*/
    height:20px;
    border-radius:0px 0px 20px 20px;
}
    </style>
</head>
<body>
    <div><a class="Round"></a></div>
    <div><a class="LeftRound"></a></div>
    <div><a class="RightRound"></a></div>
    <div><a class="TopRound"></a></div>
    <div><a class="BottomRound"></a></div>
</body>

</html>